<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import global_msg from "../../global";

  export default{
    data() {
      return{
        sign: [
          "Je t'aime",
          "Music",
          "Tarvel",
          "Coding"
        ],
      }
    },
    methods: {
      personalChange() {
        this.$refs.personal.style.height = '60vh'
      },
      //跳转至gitee
      toGitee() {
        window.location.href = global_msg.gitee
      },
      //跳转至网易云
      toNetMusic() {
        window.location.href = global_msg.netmusic
      },
      //跳转至bilibili
      toBili() {
        window.location.href = global_msg.bilibili
      },
    },
    mounted() {

    }
  }
</script>

<template>
  <div class="personal" ref="personal">
    <el-header style="padding: 0;height: 40%">
      <el-image :src="require('../assets/images/headshot.jpg')" class="headshot"></el-image>
    </el-header>
    <el-main style="text-align: center;padding: 0;overflow: hidden">
      <el-header class="name" >
        Roches
        <div class="sign">
          <vue-typed-js
            class="desc"
            :strings="sign"
            :loop="true"
            :startDelay="200"
            :typeSpeed="100"
            :backSpeed="50"
          >
            <span class="typing"></span>
          </vue-typed-js>
        </div>
      </el-header>
      <el-main class="other">
        <el-image @click="toGitee" :src="require('../assets/icon/github.png')"
                  style="margin-left: 28%;"></el-image>
        <el-image @click="toNetMusic" :src="require('../assets/icon/music.png')"></el-image>
        <el-image @click="toBili" :src="require('../assets/icon/bilibili.png')"></el-image>
      </el-main>
      <el-collapse accordion style="user-select: none" @change="personalChange">
        <el-collapse-item name="1" style="padding-left: 10px;padding-right: 5px">
          <template slot="title">
            最爱的游戏们<i class="nav-icon el-icon-my-game" style="position: relative;left:4px;top: 3px"></i>
          </template>
          <div>塞尔达传说、GTA、底特律:变人、FIFA23</div>
        </el-collapse-item>
        <el-collapse-item name="2" style="padding-left: 10px;padding-right:5px ">
          <template slot="title">
            最爱的电影们<i class="nav-icon el-icon-my-movie" style="position: relative;left:5px;top: 3px"></i>
          </template>
          <div>星际穿越、触不可及、漫威</div>
          <div>海上钢琴师、绿皮书</div>
        </el-collapse-item>
      </el-collapse>

    </el-main>
    <!--          <div class="player"-->
    <!--               style="color:grey;width: 280px;z-index: 999;position: relative;top: 150px;right: 25px;text-align: center;font-size: small;">-->
    <!--            <aplayer :music="music" style="width: 280px;box-shadow: 0 0 5px gray"></aplayer>-->
    <!--          </div>-->
  </div>
</template>
<style>
  @import "../assets/common.css";
</style>
<style src="../assets/detail.css"  scoped>
</style>
